<template>
  <div>
    <m-header :title="iNowTitle"></m-header>
    <div class="customer">
      <div class="total_balance">
        <div class="recahrge">
          <font class="font_one">累计客户充值金额</font><br>
          <span class="font_two">
                    ￥<span>{{ moneyObj.all_recharge | formatMoney }}</span>
                </span>
        </div>
        <div class="rebate">
          <font class="font_one">累计获得返利金额</font><br>
          <span class="font_two">
          ￥<span>{{ moneyObj.channel_rebate_money | formatMoney }}</span>
        </span>
        </div>
      </div>
      <div class="customer_list">
        <div class="nav">
          <div class="tab">
            <ul>
              <li :class="listData.date_option == 1?'active':''" @click="getList(1)">今天</li>
              <li :class="listData.date_option == 2?'active':''" @click="getList(2)">最近七天</li>
              <li :class="listData.date_option == 3?'active':''" @click="getList(3)">一个月内</li>
            </ul>
          </div>
          <div class="sort" @click="getOrder()">
            <div class="sortDesc">时间排序</div>
            <div class="sortImg" v-if="orderBoolean"></div>
            <div class="sortImg2" v-if="!orderBoolean"></div>
          </div>
        </div>
        <div class="tab_header">
          <table>
            <thead>
            <th class="thOne">注册时间</th>
            <th>账号</th>
            <th>累计充值(元)</th>
            </thead>
            <tbody v-if=" tabList.length == 0 ">
            <tr>
              <td class="tab_nodata" colspan=4  >暂无数据</td>
            </tr>
            </tbody>
            <tbody v-else>
            <tr v-for="item in tabList">
              <td class="td_indent" v-html="item.register_date"></td>
              <td v-html="item.mobile"></td>
              <td v-html="item.recharge"></td>
            </tr>
            </tbody>
          </table>
        </div>
        <Page :total="totalCount" show-total :page-size="listData.pageRowCount" size="small" v-if="totalCount > 0"
              @on-change="handleChange"></Page>
      </div>
    </div>
    <Copyright></Copyright>
  </div>
</template>

<script type="text/ecmascript-6">
  import MHeader from 'base/m-header/m-header'
  import {ERR_OK} from 'config/config'
  import {Toast} from 'mint-ui'
  import 'mint-ui/lib/toast/style.css';
  import Copyright from 'base/copyright/copyright'
  import {Page} from 'iview'
  import 'iview/dist/styles/iview.css';

  export default {
    data() {
      return {
        iNowTitle: '我的客户',
        moneyObj: {
          all_recharge: 0,
          channel_rebate_money: 0
        },
        tabList: [],
        totalCount: 0,
        orderBoolean: true,
        listData: {
          date_option: 1,
          order: 'desc',
          currentPage: 1,
          pageRowCount: 20
        }
      }
    },
    created() {
      this.getStatistics();
      this.getOrder();
    },
    methods: {
      getStatistics() {
        this.$http({
          method: 'post',
          url: '/mobile/api/v1.0/channelAgent/myRebateAndRecharge'
        }).then((res) => {
          if (res.data.code == ERR_OK) {
            this.moneyObj = res.data.data;
          } else {
            Toast('请求失败，请刷新')
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      getCustomers() {
        this.$http({
          method: 'post',
          url: '/mobile/api/v1.0/channelAgent/myClient',
          data: this.listData
        }).then((res) => {
          if (res.data.code == ERR_OK) {
            this.tabList = res.data.data.list;
            this.totalCount = res.data.data.totalCount;
          } else {
            Toast('请求失败，请刷新')
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      getOrder() {
        if (this.listData.order == "desc") {
          this.listData.order = "asc";
        } else {
          this.listData.order = "desc";
        }
        this.orderBoolean = !this.orderBoolean;
        this.listData.currentPage = 1;
        //根据用户点击的时间排序加载数据
        this.getCustomers();
      },
      handleChange(index) {
        this.listData.currentPage = index;
        this.getCustomers();
      },
      getList(type) {
        this.listData.date_option = type;
        this.listData.currentPage = 1;
        this.getCustomers();
      }
    },
    components: {
      MHeader,
      Copyright,
      Page
    }
  }

</script>

<style lang="less" rel="stylesheet/less">
  .ivu-page.mini .ivu-page-total {
    display: block;
  }

  .ivu-page.mini .ivu-page-next, .ivu-page.mini .ivu-page-prev {
    min-width: 12px !important;
  }
</style>
